<template>
	<view class="pad-lr-30 bgfff">
	<view class="display view_view pad-tb-40">
		<view class="left_view">
			地区
		</view>
		<view class="right_view display-sb align-items" @click="selenowaddress">
				<view class="ml10 text-align-right fontSize-28">{{info.province||'选择所在省、市、区'}}</view>
			<image src="/static/img/icon_youjiantou_.png" class="you_icon ml10" mode=""></image>
		</view>
	</view>
	<view class="display-sb view_view pad-tb-40">
		<view class="left_view">
			详细地址
		</view>
		<view class="right_view display-sb align-items">
			<view class="display align-items">
				<input type="text" class="ml10 fontSize-28"  v-model="info.address" placeholder="请填写详细地址" />
			</view>
		</view>
	</view>
	<view class="display-sb view_view pad-tb-40">
		<view class="left_view">
			门店名称
		</view>
		<view class="right_view display-sb align-items">
			<view class="display align-items">
				<input type="text" class="ml10 fontSize-28" v-model="name" placeholder="请填写门店名称" />
			</view>
		</view>
	</view>
	<view class="display-sb view_view pad-tb-40">
		<view class="left_view">
			联系方式
		</view>
		<view class="right_view display-sb align-items">
			<view class="display align-items">
				<input type="number" maxlength="11" class="ml10 fontSize-28" v-model="phone" placeholder="请填写联系方式" />
			</view>
		</view>
	</view>
	<view class="display-sb view_view pad-tb-40">
		<view class="left_view">
			微信号
		</view>
		<view class="right_view display-sb align-items">
			<view class="display align-items">
				<input type="text" class="ml10 fontSize-28" v-model="wx_number" placeholder="请填写微信号" />
			</view>
		</view>
	</view>
	<view class="mar-top-30 fontSize-30">logo主图</view>
	<view class="pad-tb-30">
		<o-upload :imageHeight="200" :maxFile="1"   @success="successimg3" @remove="remove3"></o-upload>
	</view>
	<view class="mar-top-30 fontSize-30">营业执照</view>
	<view class="pad-tb-30">
		<o-upload :imageHeight="200" :maxFile="1"   @success="successimg1" @remove="remove1"></o-upload>
	</view>
	<view class="mar-top-30 fontSize-30">门店照片</view>
	<view class="pad-tb-30">
		<o-upload :imageHeight="200" :maxFile="9"   @success="successimg2" @remove="remove2"></o-upload>
	</view>
	<view class="baocun_btn poFi text-align-center col-f fontSize-32 radius-40" @click="addressbtn">
		保存
	</view>
	<!-- 地址选择弹窗 -->
	<!-- <tm-city-picker v-model:show="showdate" color="#2DB295" @confirm="change" v-model="citydate" v-model:model-str="dateStr"></tm-city-picker> -->
	<my-address :showPop="showdate" @confirm_shop="sureAddress" @cancel="cancel"></my-address>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {subShopApply,ApitestUrl} from '@/utils/api'
import { onLoad } from '@dcloudio/uni-app';
onLoad(()=>{
	
})
const info = ref({
	province:'',
	city:[],
	address:''
})
const name = ref()
const phone = ref()
const cover = ref([])
const business = ref([])
const showdate = ref(false)
const dateStr = ref()
const wx_number = ref()
const selenowaddress =() =>{
	showdate.value = true
}
const change =(e) =>{
	info.value.province = dateStr.value.split('/')[0]
	info.value.city = dateStr.value.split('/')[1]
	info.value.area = dateStr.value.split('/')[2]
}
const successimg1 =(e,fileList) =>{
	console.log(e,fileList,18)
	let imglist = []
	fileList.forEach(item=>{
		if(item.response){
			imglist.push(JSON.parse(item.response).data.file.url)		
		}else{
			imglist.push(item.url)
		}
		business.value = imglist
	})
}
const successimg2 =(e,fileList) =>{
	let imglist = []
	fileList.forEach(item=>{
		if(item.response){
			imglist.push(JSON.parse(item.response).data.file.url)		
		}else{
			imglist.push(item.url)
		}
		cover.value = imglist
	})
}
const image = ref([])
const successimg3 =(e,fileList) =>{
	let imglist = []
	fileList.forEach(item=>{
		if(item.response){
			imglist.push(JSON.parse(item.response).data.file.url)		
		}else{
			imglist.push(item.url)
		}
		image.value = imglist
	})
}
const remove1 = (e) =>{
	business.value=[]
}
const remove2 = (e) =>{
	cover.value.forEach((item,index)=>{
		if(item==e.url){
			cover.value.splice(index,1)
		}
	})
}
const remove3 = (e) =>{
	image.value=[]
}
const sureAddress = (e,a) =>{
	console.log(e,a)
	info.value.province = e
	info.value.city = a
	showdate.value = false
}
const cancel = () =>{
	showdate.value = false
}
const addressbtn =() =>{
	console.log(info.value.city)
	if(info.value.city.length==0){
		uni.showToast({
			title:'请选择城市',
			icon:'none'
		})
		return
	}
	if(!name.value){
		uni.showToast({
			title:'请输入门店名称',
			icon:'none'
		})
		return
	}
	if(!phone.value){
		uni.showToast({
			title:'请输入门联系方式',
			icon:'none'
		})
		return
	}
	if(!cover.value.length){
		uni.showToast({
			title:'请上传门店照片',
			icon:'none'
		})
		return
	}
	if(!image.value.length){
		uni.showToast({
			title:'请上传logo',
			icon:'none'
		})
		return
	}
	if(!business.value.length){
		uni.showToast({
			title:'请上传营业执照',
			icon:'none'
		})
		return
	}
	if(!info.value.address){
		uni.showToast({
			title:'请输入详细地址',
			icon:'none'
		})
		return
	}
	if(!wx_number.value){
		uni.showToast({
			title:'请输入微信号',
			icon:'none'
		})
		return
	}
	subShopApply({
		city:info.value.city.join(','),
		name:name.value,
		phone:phone.value,
		images:cover.value.join(','),
		image:image.value.join(','),
		business_image:business.value.join(','),
		address:info.value.address,
		wx_number:wx_number.value
	}).then(res=>{
		uni.showToast({
			title:res.msg,
			icon:'none'
		})
		if(res.code==1){
			setTimeout(()=>{
				uni.navigateBack({delta:1})
			},1500)
		}
	})
}
</script>

<style lang="scss">
page{
	padding-bottom: 200rpx;
	background:#f6f6f6;
}
.view_view{
	border-bottom: 3rpx solid #F9F9F9;
}
.left_view{
	width: 180rpx;
}
.right_view{
	width: 512rpx;
	.you_icon{
		width: 28rpx;
		height: 28rpx;
	}
}
.baocun_btn{
	width: 600rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: linear-gradient(270deg, #bc8c1e 0%, #fdfdfd 100%);
	bottom: 100rpx;
	left: calc(50% - 300rpx);
}
</style>
